<template>
  <div class="component">
    <van-divider v-if="first" />
    <div class="container">
      <div class="avatar">
        <my-image
          :src="option.user.avatar"
          width="80rpx"
          height="80rpx"
          :round="true"
          />
      </div>
      <div class="content flex-column">
        <div class="username">{{option.user.name}}</div>
        <show-rate
          :value="option.score"
          />
        <div class="comment">{{option.content}}</div>
        <div class="group flex-row">
          <div class="like flex-row">
            <van-icon 
              name="like"
              size="16"
              :color="option.liked ? 'red' : '#DAD9E2' "
              />
            <div class="like-count">{{option.like}}</div>
          </div>
          <div class="time">{{time}}</div>
        </div>
      </div>
    </div>
    <van-divider />
  </div>
</template>

<script>
import {
  pastTime
} from '../../utils/time'
export default {
  props: {
    option: {
      type: Object,
      required: true
    },
    first: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    time() {
      return pastTime(this.option.time)
    }
  }
}
</script>

<style lang="less" scoped>
.component {
  .container {
    display: flex;
    flex-direction: row;
    .avatar {
      margin: 0 36rpx;
      justify-content: start;
      align-content: flex-start;
    }
    .content {
      align-items: start;
      margin: 0 36rpx 0 0;
      .comment {
        margin: 32rpx 0;
        font-size: 28rpx;
      }
      .group {
        width: 100%;
        justify-content: space-between;
        font-size: 24rpx;
        .like {
          .like-count {
            margin: 0 14rpx;
          }
        }
      }
    }
  }
}
</style>